<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">

<meta charset="UTF-8">
<title>VRD中心展示</title>
<meta name="viewport"
  content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <link rel="stylesheet" type="text/css"
	href="bootstrap3/css/bootstrap.css"> -->
<link rel="stylesheet"
  href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
  href="bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<style type="text/css">
body {
	background-color: white;
	padding-top: 20px;
}

navbar {
	border: 0;
}

#logo {
	position: relative;
	top: -10px;
}
/* 导航栏鼠标悬停时为黄色 */
.nav.navbar-nav>li>a:hover {
	color: #ffc600;
}

#search>input {
	border-radius: 30px;
	border: none;
	height: 30px;
	padding: 10px 20px;
	background-color: rgb(232, 240, 254);
	position: relative;
	top: 10px;
	outline: none; /* 去掉点击后的外边框 */
}

.glyphicon {
	background-color: rgba(0, 0, 0, 0);
	border: none;
	color: gray;
	position: relative;
	top: 13px;
	left: -40px;
	outline: none;
}

/* 列表组 */
.list-group-item-heading {
	background-color: rgb(240, 240, 240);
}

/* 给图片添加缩放动画 */
img {
	transition-duration: 1s;
}

img:hover {
	transform: scale(1.2); /* 鼠标移入时缩放1.2倍大小 */
}

.grid-item {
	overflow: hidden; /* 为了实现缩放超出的内容不显示 */
}
</style>
</head>
<body>
  <header class="container">
    <!-- 头部居中 -->
    <!-- logo -->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"> <img id="logo"
            alt="Brand" src="images/logo.png">
          </a>
        </div>
        <!-- 无序列表 -->
        <ul class="nav navbar-nav">
          <li><a href="HomeServlet">首页</a></li>
          <li th:each="c:${list}"><a th:href="'HomeServlet?id='+${c.id}" th:text=${c.name}>手绘</a></li>
          <li>
            <form action="HomeServlet">
              <div id="search">
                <input type="text" name="keyword">
                <button type="submit" class="glyphicon glyphicon-search"></button>
              </div>
            </form>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <!-- th:if="${user}==null 如果context中的user为空说明没有登录过，
		    	没有登录就显示登录入口-->
          <li th:if="${user}==null"><a href="ShowLoginServlet"
            class="fa fa-user-circle-o">管理员入口</a></li>
          <li th:if="${user}!=null"><a href="#"
            class="fa fa-user-circle-o">轮播图</a></li>
          <li th:if="${user}!=null"><a href="ShowSendServlet"
            class="fa fa-user-circle-o">发布作品</a></li>
          <li th:if="${user}!=null"><a href="LogoutServlet"
            class="fa fa-user-circle-o">登出</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <!--主题  -->
  <section>


    <!-- 通过栅格系统划分为9:3二部分 作品 -->
    <div class="container" style="margin-top: 10px;">
      <div class="row">
        <!-- 左侧内容 -->
        <div class="col-md-9">
          <!-- 作品详情开始 -->
          <h2 th:text=${p.title} class="page-header"></h2>
          <span th:text="'作者：'+${p.author}"></span>
          <!-- 显示到右侧的内容 -->
          <span class="pull-right"> <span
            th:text="'浏览量：'+${p.viewCount}"></span> <span
            th:text="'点赞量：'+${p.likeCount}"></span>
          </span>
          <!-- 添加点赞按钮和删除按钮 -->
          <p class="text-center">
            <a th:href="'LikeServlet?id='+${p.id}" class="btn btn-info btn-lg">给作品点赞</a>
            <!-- 只有登录之后才能显示删除按钮 -->
            <a th:href="'DelServlet?id='+${p.id}" th:if="${user}!=null" class="btn btn-danger btn-lg">删除</a>
          </p>
          <img th:src="${p.imgPath}" class="img-responsive center-block">
          <p th:text=${p.intro} class="text-center"></p>
          <!-- 作品详情结束 -->
        </div>
        <!-- 右侧内容 -->
        <div class="col-md-3">
          <!-- 浏览最多开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3 class="fa fa-eye">浏览最多</h3>
            </li>
            <li th:each="p:${viewList}" class="list-group-item">
              <!-- 左对齐多媒体对象 -->
              <div class="media">
                <div class="media-left">
                  <a th:href="'DetailServlet?id='+${p.id}"> <img
                    th:src=${p.imgPath} class="media-object"
                    style="width: 60px; height: 50px;">
                  </a>
                </div>
                <div class="media-body">
                  <a th:href="'DetailServlet?id='+${p.id}">
                    <h4 th:text=${p.title} class="media-heading">左对齐</h4>
                  </a>
                  <p th:text=${p.intro}>这是一些示例文本...</p>
                </div>
              </div>
            </li>
          </ul>
          <!-- 浏览最多结束-->

          <!-- 最受欢迎开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3 class="fa fa-eye">最受欢迎</h3>
            </li>
            <li th:each="p:${likeList}" class="list-group-item">
              <!-- 左对齐多媒体对象 -->
              <div class="media">
                <div class="media-left">
                  <a th:href="'DetailServlet?id='+${p.id}"> <img
                    th:src=${p.imgPath} class="media-object"
                    style="width: 60px; height: 50px;">
                  </a>
                </div>
                <div class="media-body">
                  <a th:href="'DetailServlet?id='+${p.id}">
                    <h4 th:text=${p.title} class="media-heading">左对齐</h4>
                    <p th:text=${p.intro}>这是一些示例文本...</p>
                  </a>
                </div>
              </div>
            </li>
          </ul>
          <!-- 最受欢迎结束-->
        </div>
      </div>
    </div>
  </section>

  <footer class="well container">
    <b>Copyright © 2018 Tedu.cn All Rights Reserved
      京ICP备08000853号-56 <a href="#">虚拟偶像培养有限科技公司</a> 版权所有
    </b>
    <!-- 内容要显示到右侧pull-right 等效float:right -->
    <span class="pull-right"><b>Version</b> 0.1.0</span>
  </footer>

</body>
<script type="text/javascript" src="bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="bootstrap3/js/respond.min.js"></script>
<!-- 引入瀑布流相关框架文件 -->
<script type="text/javascript" src="js/imagesloaded.pkgd.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>

<script>
	//给删除按钮添加点击事件
	$(".btn-danger").click(function(){
		//confirm确定返回true,取消返回false
		return confirm("您确定删除此作品吗？");
	})
</script>
</html>

















